<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="wallet">
      <div class="headbg flexcolumn">
        <div class="top flexAlign">
          总资产(USDT)
          <i
            :class="
              $store.state.showMoney ? 'icon i-yanjing' : 'icon i-yincang'
            "
            @click="$store.commit('setShowMoney', !$store.state.showMoney)"
          ></i>
        </div>
        <div v-show="$store.state.showMoney" class="money flex">
          <publicMoney
            :money="money"
            :show-money="$store.state.showMoney"
          ></publicMoney>
          <span style="color: #ffffff">≈</span>
          <span>{{ CNY }}</span>
          <span style="margin-left: 3px">CNY</span>
        </div>
        <div v-show="!$store.state.showMoney" class="money">******</div>
        <div class="foot flex">
          <div class="btnItem flexCenter" @click="$router.push('/recharge')">
            <img src="@/assets/imgs/wallet/recharge.png" alt="" />
          </div>
          <div class="btnItem flexCenter" @click="$router.push('/mention')">
            <img src="@/assets/imgs/wallet/tibi.png" alt="" />
          </div>
        </div>
      </div>
      <van-tabs
        v-model="active"
        swipeable
        animated
        class="vantabs"
        line-width="52px"
        line-height="2px"
        title-active-color="#000"
        title-inactive-color="#9AA4C2"
        color="#3B6EF1"
      >
        <van-tab v-for="(item, i) in tabs" :key="i" :title="item.text">
          <div class="area"></div>
          <fk-list ref="fklist" class="vanlist" :load="load">
            <div v-for="(v, index) in lists[active]" :key="index" class="list">
              <div class="box1 flexBetween">
                <span class="text">{{ v.typeName }}</span>
                <span class="num" :class="{ color1: v.amount < 0 }">
                  {{ v.amount > 0 ? '+' + v.amount : v.amount }}
                </span>
              </div>
              <div class="box2 flexBetween">
                <span class="balance">余额:{{ v.afterAmount }}</span>
                <span class="date">{{ fullTime(v.createTime) }}</span>
              </div>
            </div>
          </fk-list>
        </van-tab>
      </van-tabs>
    </div>
  </van-pull-refresh>
</template>

<script>
  import FkList from '@/components/fkList'
  import publicMoney from '@/components/publicMoney'
  import { fullTime } from '@/utils/commonFun'
  export default {
    name: 'Wallet',
    components: { FkList, publicMoney },
    data() {
      return {
        fullTime,
        money: '',
        tabs: [
          {
            text: '全部',
            type: 0,
          },
          {
            text: '充币',
            type: 1,
          },
          {
            text: '租赁矿机',
            type: 4,
          },
          {
            text: '提币',
            type: 2,
          },
          {
            text: '提币退回',
            type: 3,
          },
        ], //tab的文案
        lists: [[], [], [], [], []], //每个tab对应的list
        active: 0, //默认选中的tab
        isLoading: false,
        CNY: 0, //人名币
        pageSize: 10,
      }
    },
    created() {},
    methods: {
      async load({ pageNo }) {
        return []
      },
      onRefresh() {
        this.$refs.fklist[this.active].refresh().then((_) => {
          this.isLoading = false
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .wallet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    .headbg {
      height: 180px;
      background: url('../../assets/imgs/wallet/qinbao_jpg.png') no-repeat;
      background-size: cover;
      padding: 0 30px;
      overflow: hidden;
      justify-content: space-between;
      .top {
        margin-top: 31px;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        .icon {
          font-size: 16px;
          margin-left: 13px;
        }
      }
      .money {
        overflow-x: scroll;
        font-size: 33px;
        font-weight: bold;
        color: #ffffff;
        align-items: baseline;
        span {
          font-size: 16px;
          margin-left: 12px;
          color: #f5cd98;
        }
      }
      .foot {
        height: 48px;
        background: url('../../assets/imgs/wallet/heijin.png') no-repeat;
        background-size: cover;
        justify-content: space-around;
        align-items: center;
        .btnItem {
          width: 50%;
        }
        img {
          width: 57px;
          height: 17px;
        }
      }
    }

    .vantabs {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
      /deep/.van-tabs__wrap {
        height: 54px;
        font-weight: bold;
        .van-tabs__nav {
          padding: 0;
        }
        .van-tab--active {
          font-weight: bold;
        }
        .van-tabs__line {
          bottom: 0;
        }
      }
      /deep/.van-tabs__content {
        flex: 1;
        .van-tab__pane {
          height: 100%;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .vanlist {
            flex: 1;
            overflow: auto;
            padding: 0 15px;
            .text {
              font-size: 15px;
              color: #000000;
            }
            .num {
              font-size: 15px;
              font-weight: bold;
              color: #3b6ef1;
            }
            .color1 {
              color: #12b4a7;
            }
            .balance,
            .date {
              font-size: 11px;
              color: #b0b6d6;
            }
            .van-list__finished-text {
              margin-top: 50px;
            }
            .list {
              height: 64px;
              border-bottom: 1px solid #e9e9e9;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .box2 {
                margin-top: 10px;
              }
            }
          }
        }
      }
      .area {
        width: 100%;
        height: 10px;
        background: #f7f7f9;
      }
    }
  }
</style>
